<template>
    <popup type='center' ref='extend_popup'>
      <view class='article_btn'>
        <view 
          hover-class='btn_hover2' 
          v-for='(btn,btn_index) in btn_list' :key='btn_index'
          @tap='clickArticle(btn_index)'>{{btn}}</view>
      </view>
    </popup>
</template>

<script>
    export default {
        data() {
            return {
                btn_list: ['复制信息','加入持续跟踪','收藏','分享','取消',],
            }
        },
        computed: {
            // 文章数据
            article_data() {
                return this.$store.state.article_data
            },
            // 是否显示文章扩展按钮
            extend_show() {
                return this.$store.state.extend_show
            },
        },
        watch: {
            extend_show(val) {
                if(val) {
                    this.show()
                }else {
                    this.hidden()
                } 
            }
        },
        mounted() {
            
        },
        methods: {
            // 显示
            show() {
                this.$refs.extend_popup.show();
            },
            // 隐藏
            hidden() {
                this.$refs.extend_popup.close();
            },
            // 对应的功能按钮
            clickArticle(index) {
                switch(index) {
                case 0: {
                    console.log('复制信息')
                    break;
                }
                case 1: {
                    console.log('加入持续跟踪')
                    break;
                }
                case 2: {
                    console.log('收藏')
                    break;
                }
                case 3: {
                    console.log('分享')
                    break;
                }
                case 4: {
                    console.log('取消')
                    this.$refs.extend_popup.close();
                    break;
                }
                }
            }
        }
    }
</script>

<style scope lang='scss'>
  .article_btn {
    width: 520upx;
    background:#fff;
    border-radius:12upx;
    >view {
      width: 100%;
      height: 90upx;
      border-bottom: 1px solid #E2E2E2;
      box-sizing: border-box;
      font-size: 32upx;
      color: #0084FF;
      display: flex;
      align-items: center;
      justify-content: center;
      &:nth-last-child(1) {
        border: none;
        color: #666;
      }
    }
  }
</style>